<template>
  <div>
    <Header :width="1000">
      <template v-slot:right>
        <div class="btn" @click="goTestRecord">测试记录</div>
      </template>
    </Header>
    <div class="sentence-test-center test-center w1000">
      <div class="test-container">
        <div class="test-container-header flex-space-be">
          <div class="class-name">
            <span>
              <span class="reminder-text">当前课程：</span>
              {{ checkedBookData.edition_name }}-{{
                checkedBookData.grade_name
              }}
            </span>
          </div>
          <el-button class="button button-bg-second" @click="checkTypeDialog = true" style="float: right;margin-right: 20px;">
              打印测试试卷
            </el-button>
        </div>
        <div class="test-container-info">
          <!-- <div class="test-container-title">同步句子</div> -->
          <div>
            <div class="test-item" v-for="(item1, index1) in todayStudyData" :key="index1">
              <h4 class="">
                <img v-if="item1.category == 0" src="@/assets/img/icon/s-icon-1.png" alt="" />
                <img v-if="item1.category == 1" src="@/assets/img/icon/s-icon-2.png" alt="" />
                <img v-if="item1.category == 2" src="@/assets/img/icon/s-icon-3.png" alt="" />
                <img v-if="item1.category == 3" src="@/assets/img/icon/s-icon-4.png" alt="" />
                <span class="ml10">
                  {{ $store.getters.sentenceCategory[item1.category].title }}
                </span>
              </h4>
              <div class="test-btn-item" v-if="item1.study_number_list_vo">
                <!-- 今日已学测试 -->
                <div>
                  <el-tooltip class="item" effect="dark" placement="bottom" v-if="item1.study_number_list_vo &&
                    item1.study_number_list_vo.today_study_number < 10
                    ">
                    <div slot="content" class="tooltip-text">
                      请在今日已学句子达到 <br />
                      10个以后再进行测试
                    </div>
                    <div class="flex-space-be">
                      <span>今日已学测试</span>
                      <span class="number">
                        <span class="mr10">{{
                          item1.study_number_list_vo.today_study_number
                        }}</span>
                        <img src="@/assets/img/icon/icon-circle-bg.png" alt="" />
                      </span>
                    </div>
                  </el-tooltip>
                  <div class="flex-space-be green-item click" v-else @click="goTest(item1.category, 1)">
                    <span>今日已学测试</span>
                    <span class="number">
                      <span class="mr10">{{
                        item1.study_number_list_vo.today_study_number
                      }}</span>
                      <i class="font_family icon-jiantouloukong-you"></i>
                    </span>
                  </div>
                </div>
                <!--已学测试  -->
                <div>
                  <el-tooltip class="item" effect="dark" placement="bottom" v-if="item1.study_number_list_vo &&
                      item1.study_number_list_vo.study_number < 10
                      ">
                    <div slot="content" class="tooltip-text">
                      请在已学句子达到10个 <br />
                      以后再进行测试
                    </div>
                    <div class="flex-space-be">
                      <span>已学测试</span>

                      <span class="number">
                        <span class="mr10">{{
                          item1.study_number_list_vo.study_number
                        }}</span>
                        <i class="font_family icon-jiantouloukong-you"></i>
                      </span>
                    </div>
                  </el-tooltip>
                  <div class="flex-space-be green-item click" @click="goTest(item1.category, 2)" v-else>
                    <span>已学测试</span>
                    <span class="number">
                      <span class="mr10">{{
                        item1.study_number_list_vo.study_number
                      }}</span>
                      <i class="font_family icon-jiantouloukong-you"></i>
                    </span>
                  </div>
                </div>
                <!-- 生句 -->
                <div>
                  <el-tooltip class="item" effect="dark" placement="bottom" v-if="item1.study_number_list_vo &&
                      item1.study_number_list_vo.grow_number < 10
                      ">
                    <div slot="content" class="tooltip-text">
                      请在生句达到10个 <br />
                      以后再进行测试
                    </div>
                    <div class="flex-space-be">
                      <span>生句测试</span>
                      <span class="number">
                        <span class="mr10">{{
                          item1.study_number_list_vo.grow_number
                        }}</span>
                        <i class="font_family icon-jiantouloukong-you"></i>
                      </span>
                    </div>
                  </el-tooltip>
                  <div class="flex-space-be green-item click" v-else @click="goTest(item1.category, 3)">
                    <span>生句测试</span>
                    <span class="number">
                      <span class="mr10">{{
                        item1.study_number_list_vo.grow_number
                      }}</span>
                      <i class="font_family icon-jiantouloukong-you"></i>
                    </span>
                  </div>
                </div>
                <!-- 熟句 -->
                <div>
                  <el-tooltip class="item" effect="dark" placement="bottom" v-if="item1.study_number_list_vo &&
                      item1.study_number_list_vo.today_study_number < 10
                      ">
                    <div slot="content" class="tooltip-text">
                      请在熟句达到10个 <br />
                      以后再进行测试
                    </div>
                    <div class="flex-space-be">
                      <span>熟句测试</span>

                      <span class="number">
                        <span class="mr10">{{
                          item1.study_number_list_vo.ripe_number
                        }}</span>
                        <i class="font_family icon-jiantouloukong-you"></i>
                      </span>
                    </div>
                  </el-tooltip>
                  <div class="flex-space-be green-item click" v-else @click="goTest(item1.category, 4)">
                    <span>熟句测试</span>
                    <span class="number">
                      <span class="mr10">{{
                        item1.study_number_list_vo.ripe_number
                      }}</span>
                      <i class="font_family icon-jiantouloukong-you"></i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择模块 -->
    <el-dialog
      title="提示"
      :visible.sync="checkTypeDialog"
      @close="closeCheckTypeDialog"
      width="600px"
      center
      class="question-type"
    >
      <div>
        <el-form ref="form" :model="checkForm" label-width="80px">
          <el-form-item label="选择题型" v-if="checkedBookData.book_id != 600">
            <el-checkbox-group v-model="checkForm.questionType">
              <el-checkbox-button :label="1">连词成句</el-checkbox-button>
              <el-checkbox-button :label="2">句子默写</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="选择单元">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <el-checkbox-group
              v-model="checkForm.unitList"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                :label="unit.unit_id"
                v-for="unit in unitList"
                :key="unit.unit_id"
                >{{ unit.unit_name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button button-bg-primary" @click="goPrintTest()"
          >前往预览</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { getTestSentenceData } from "@/api/sentence";
import { getTestWordData, getPaperList, getUnitList } from "@/api/index";
export default {
  data() {
    return {
      paperParams: {
        pageNum: 1,
        pageSize: 15,
      },
      todayStudyData: [],
      checkedBookData: null,
      checkTypeDialog:false,
      checkForm: {
        questionType: [1],
        unitList: [],
      },
      isIndeterminate: true,
      checkAll: false,
      unitList:[]
    };
  },
  components: {
    Header,
  },
  computed: {
    unitIdList() {
      return this.unitList.map((item) => {
        return item.unit_id;
      });
    },
  },
  methods: {
    // 打印测试卷
    closeCheckTypeDialog() {
      let checkedUnit = JSON.parse(localStorage.getItem("checkedUnit"));
      if (checkedUnit) {
        let data = this.unitList.filter((item) => {
          return item.unit_id == checkedUnit.unit_id;
        });
        if (data.length > 0 && checkedUnit.unit_id) {
          this.checkForm.unitList = [checkedUnit.unit_id];
        }
      }
      this.checkForm.questionType = [];
      this.checkAll = false;
      this.isIndeterminate = true;
    },
    handleCheckAllChange(val) {
      this.checkForm.unitList = val ? this.unitIdList : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.unitIdList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.unitIdList.length;
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      getUnitList(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.unitList = res.data;
          let checkedUnit = JSON.parse(localStorage.getItem("checkedUnit"));
          if (checkedUnit) {
            let data = this.unitList.filter((item) => {
              return item.unit_id == checkedUnit.unit_id;
            });
            if (data.length > 0 && checkedUnit.unit_id) {
              this.checkForm.unitList = [checkedUnit.unit_id];
            }
          }
        }
      });
    },
    goPrintTest() {
      this.$router.push({
        name: "sentencePrintTest",
        query: {
          unitId:
            this.checkForm.unitList.length > 0
              ? this.checkForm.unitList.join(",")
              : this.unitIdList.join(","),
          category: 24,
          questionType:
            this.checkForm.questionType.length > 0
              ? this.checkForm.questionType.join(",")
              : [1, 2, 5].join(","),

          isPrint: 1,
        },
      });
    },
    goTest(category, type) {
      this.$confirm("进入测试", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: true,
        distinguishCancelAndClose: true,
      })
        .then(() => {
          this.$router.push({
            name: "sentenceTest",
            query: {
              category: category,
              type: type,
              mode: 0,
            },
          });
        })
        .catch(() => { });
    },
    goTestRecord() {
      this.$router.push({
        name: "sentenceTestRecord",
      });
    },

    getTestSentenceData() {
      getTestSentenceData({ bookId: this.checkedBookData.book_id }).then(
        (res) => {
          if (res.code == 200 && res.data) {
            this.todayStudyData = res.data.sort((a, b) => {
              return a.category - b.category;
            });
          }
        }
      );
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getTestSentenceData();
    this.getUnitList();
  },
  mounted() { },
};
</script>